import React, { Component } from "react";
import { Card, Button, Table, message, Modal } from "antd";
import { PlusOutlined, RightOutlined } from "@ant-design/icons";
import LinkButton from "@/components/link-button";
import { reqCategorys, reqAddCategory, reqDeleteCategory, reqUpdateCategory } from "@/api";
import AddForm from "./addForm";
import UpdateForm from "./updateForm";

/**
 * 商品分类组件
 */
export default class Category extends Component {
  constructor(props) {
    super(props);
    this.initColumn();
    this.state = {
      categorys: [],   //一级分类列表
      subCategorys: [],  //二级分类列表
      loading: false,
      parentId: '0', //当前需要显示的分类的列表的parentId
      parentName: "",  //当前显示的分类的父分类的名称
      showStatus: 0,  //标识添加/更新的确认框是否显示  0都不不显示 1.显示添加  2.表示更新
    };
  }

  initColumn = () => {
    this.columns = [
      {
        title: "分类的名称",
        dataIndex: "name", //显示数据对应的属性名
        key: "name",
      },
      {
        title: "操作",
        width: 500,
        render: (category) => (
          //返回需要显示的标签
          <span>
            <LinkButton style={{ marginRight: "10px" }} onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
            <LinkButton style={{ marginRight: "10px" }} onClick={() => this.deleteCategorys(category)}>删除分类</LinkButton>
            {/* 如何向事件回调传递参数：先定义一个匿名函数，在函数调用处理的函数并传入数据 */}
            {this.state.parentId === '0' ? <LinkButton onClick={() => this.showSubCategorys(category)}>查看子分类</LinkButton> : null}
          </span>
        ),
      },
    ];
  };


  //异步获取一级分类数据
  //parentId:如果没有指定根据状态中的parentId进行请求，如果指定了就根据指定的请求
  getCategorys = async (parentId) => {
    //请求前显示loading
    this.setState({ loading: true })
    //如果传了值使用传递的值，没有传递值使用状态里面的值
    parentId = parentId || this.state.parentId
    //发异步ajax请求获取数据
    const result = await reqCategorys(parentId);
    //请求结束后
    this.setState({ loading: false })
    if (result.data.status === 0) {
      //取出的分类可能是一级也可能是二级的
      const categorys = result.data.data
      if (parentId === '0') {
        this.setState({
          categorys
        })
      } else {
        //更新二级分类的状态
        this.setState({
          subCategorys: categorys
        })
      }
    } else {
      message.error("获取分类列表失败")
    }

  }
  //获取指定一级分类的二级分类子列表
  showSubCategorys = (category) => {
    //更新状态
    this.setState({
      parentId: category._id,
      parentName: category.name
    }, () => {
      //在状态更新且重新render()后执行
      //setState不会立即获取最新的状态因为setState是异步更新状态的,回调函数是在状态更新之后执行，可以在此获取最新的状态
      this.getCategorys();
    })
    //获取二级分类列表

  }

  //显示一级分类的列表
  showCategorys = () => {
    //更新为显示一级分类的列表显示的状态
    this.setState({
      parentId: '0',
      parseInt: '',
      subCategorys: []
    })
  }

  //显示添加
  showAdd = () => {
    this.setState({
      showStatus: 1
    })
  }

  //修改分类
  showUpdate = (category) => {
    //保存分类对象  保存在this中的对象
    this.category = category;
    this.setState({
      showStatus: 2
    })
  }

  //删除分类
  deleteCategorys = async (category) => {
    const id = category._id;
    let result = await reqDeleteCategory(id);
    if (result.data.status === 1) {
      //删除失败
      message.error(result.data.msg)
    } else {
      //请求数据
      this.getCategorys();
    }

  }

  //响应点击取消 隐藏确定框
  handleCancel = () => {
    this.setState({
      showStatus: 0
    })
  }

  //添加分类
  addCategory = () => {

    this.form.validateFields().then(async(values)=>{
         //1.隐藏确定框
         this.setState({
          showStatus: 0
        })
        //收集数据 并提交数据
        const { categoryName, parentId } = values

        //清除表单的输入的数据
        this.form.resetFields();
        //发送请求添加分类
        let result = await reqAddCategory(categoryName, parentId);
        if (result.data.status === 0) {
          //添加的分类就是当前分类列表下的分类
          if (parentId === this.state.parentId) {
            //重新获取分类列表显示
            this.getCategorys();
          } else if (parentId === '0') {
            //在二级分类列表下添加一级分类，重新获取一级分类的列表，但不需要显示一级分类列表
            this.getCategorys('0')
          }
        }
    }).catch(err=>{
      message.error(err.errorFields[0]?.errors[0])
    })
  }

  //更新分类
  updateCategory = () => {
    //进行表单的验证，只有通过表单的验证才处理
    this.form.validateFields().then(async(values)=>{
       //1.隐藏确定框
       this.setState({
        showStatus: 0
      })

      //准备数据
      const categoryId = this.category._id
      //获取子组件的form实例获取输入的表单的值
      const { categoryName } = values
      this.form.resetFields();
      //2发请求更新分类
      let result = await reqUpdateCategory({ categoryId, categoryName })
      if (result.status === 200) {
        // 3.重新显示列表
        this.getCategorys();
      }
    }).catch(err=>{
    //使用err的对象的值，也可以自定义信息提示
      message.error(err.errorFields[0]?.errors[0])
    })   
  }

  //获取数据发异步ajax请求
  componentDidMount() {
    this.getCategorys();
  }
  render() {
    //card的左侧
    const { categorys, loading, subCategorys, parentId, parentName, showStatus } = this.state
    const title = parentId === '0' ? "一级分类列表" : (
      <span>
        <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
        <RightOutlined style={{ marginRight: '5px' }} />
        <span>{parentName}</span>
      </span>
    );
    //读取指定的分类
    const category = this.category || {}  //如果还没有指定空对象，如果初始化没有这个对象会报错
    //card的右侧
    const extra = (
      <Button type="primary" icon={<PlusOutlined />} onClick={this.showAdd}>
        添加
      </Button>
    );


    return (
      <Card title={title} extra={extra}>
        <Table
          rowKey="_id"
          rowSelection={{ type: "checkBox" }}
          loading={loading}
          dataSource={parentId === '0' ? categorys : subCategorys}
          columns={this.columns}
          pagination={{ defaultPageSize: 5, showQuickJumper: true }}
        />

        <Modal title="添加分类" cancelText="取消" okText="确定" open={showStatus === 1} onOk={this.addCategory} onCancel={this.handleCancel}>
          <AddForm categorys={categorys} parentId={parentId} setForm={(form) => { this.form = form }}></AddForm>
        </Modal>

        <Modal title="更新分类" cancelText="取消" okText="确定" open={showStatus === 2} onOk={this.updateCategory} onCancel={this.handleCancel}>
          <UpdateForm categoryName={category.name} setForm={(form) => { this.form = form }}></UpdateForm>
        </Modal>
      </Card>
    );
  }
}
